<template>
  <div id="app">
    <!-- 拼接字符串 -->
    <h1>{{ msg + "哈哈" }}</h1>
    <h2>{{ obj.name }}</h2>
    <!-- 三元 -->
    <p>{{ obj.age > 18 ? "成年" : "未成年" }}</p>
    <!-- 简单运算 -->
    <p>5年后年纪{{ obj.age + 5 }}</p>

    <!-- num没有在data中定义，会报错，但是不影响其他代码的执行 -->
    <!-- <p>{{num}}</p> -->

    <!-- 插值表达式不能应用在属性上，以下写法错误 -->
    <!-- <a href="{{url}}">百度一下</a> -->

    <!-- v-bind:   冒号 -->
    <a :href="url">百度</a>
    <br />
    <br />
    <br />
    <img v-bind:src="imgUrl" alt="" />

    <!-- 
      v-on:事件名="要执行的少量代码"
      v-on:事件名="methods中的函数名"
      v-on:事件名="methods中的函数名(实参)"
     -->
    <p>你要购买商品的数量: {{ count }}</p>
    <button v-on:click="count++">+1</button>
    <button v-on:click="addFn">+1</button>
    <button @click="addCountFn(5)">+5</button>
    <button v-on:click="count--">-1</button>

    <br />
    <br />
    <br />
    <a @click="event" :href="url">百度</a>
    <a @click="events(100, $event)" :href="url">百度</a>

    <br />
    <br />
    <br />
    <div>
      <p @click="fatherFn">阻止事件冒泡</p>
      <a :href="url" @click.prevent.stop>百度-阻止事件冒泡和捕获</a>
      <p @click.once="oneFn">观察事件执行几次</p>
    </div>

    <br />
    <br />
    <span>用户名：</span>
    <input type="text" v-model.trim="username" @keydown.enter="enterFn" />
    <hr />
    <span>密码：</span>
    <input type="password" v-model.number="pass" @keydown.esc="escFn" />
    <div>
      <span>来自于：</span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- 
        重要
        遇到复选框，v-model的变量值
        非数组--关联的是复选框的checked属性
        数组--关联的是复选框的value属性      
       -->
      <span>爱好：</span>
      <input type="checkbox" v-model="hobby" value="抽烟" />抽烟
      <input type="checkbox" v-model="hobby" value="喝酒" />喝酒
      <input type="checkbox" v-model="hobby" value="写代码" />写代码
    </div>
    <div>
      <span>性别：</span>
      <input type="radio" value="男" name="sex" v-model="gender" />男
      <input type="radio" value="女" name="sex" v-model="gender" />女
    </div>
    <div>
      <span>自我介绍：</span>
      <textarea
        v-model.lazy="intro"
        name=""
        id=""
        cols="30"
        rows="10"
      ></textarea>
    </div>

    <br />
    <br />
    <br />
    <br />
    <br />
    <h1>{{ msg }}</h1>
    <button @click="btn">逆转世界</button>

    <br />
    <br />
    <br />
    <br />
    <br />

    <p v-text="str"></p>
    <!-- 会覆盖插值表达式 -->
    <p v-html="str">{{ 10 + 20 }}</p>
    <br />
    <br />
    <br />
    <br />
    <br />

    <h1 v-show="isShow">我是h1</h1>
    <h2 v-if="isOk">我是h2</h2>
    <p v-if="obj.age >= 18">成年</p>
    <p v-else>未成年</p>

    <br />
    <br />
    <br />
    <br />
    <br />

    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" @click="Btn">
          {{ isShow ? "收起" : "展开" }}
        </span>
      </div>
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>

    <br />
    <br />
    <br />
    <br />
    <br />

    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }}----{{ index }}
      </li>
    </ul>

    <ul>
      <li v-for="obj in stuArr" :key="obj.id">
        <span>{{ obj.name }}</span>
        <span>{{ obj.sex }}</span>
        <span>{{ obj.hobby }}</span>
      </li>
    </ul>
    <div>
      <p v-for="(value, key) in tObj" :key="value">
        <span>{{ value }}</span>
        <span>{{ key }}</span>
      </p>
    </div>
    <div v-for="n in count" :key="n">{{ n }}</div>
  </div>
</template>

<script>
// 默认导出
export default {
  // 数据驱动视图  学生信息表案例
  // 在data中提供数据  data是个函数 ，函数内返回对象
  // data:function(){}

  // es6简写
  data() {
    return {
      // 提供数据
      msg: "嘿呵12345",
      obj: {
        name: "zs",
        age: 10,
      },
      url: "http://www.baidu.com",
      imgUrl:
        "http://yun.itheima.com/Upload/./Images/20210412/60741c11ab77b.jpg",
      count: 10,
      username: "",
      pass: "",
      from: "",
      hobby: [],
      gender: "男",
      intro: "",
      str: "<span>我是一个span</span>",
      isShow: true,
      isOk: false,
      arr: ["小黑", "小红", "小橙"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
    };
  },
  // 定义函数   methods是对象
  methods: {
    // 可以在对象中提供若干个函数
    addFn() {
      // 要修改count，不能直接去修改data中的数据
      this.count++;
    },
    addCountFn(num) {
      this.count += num;
    },
    event(e) {
      e.preventDefault();
    },
    events(num, e) {
      console.log(num);
      e.preventDefault();
    },
    fatherFn() {
      console.log("father-点击事件触发");
    },
    sonFn() {
      console.log("子事件触发");
    },
    oneFn() {
      console.log("观察事件执行几次");
    },
    enterFn() {
      console.log("用户按下了回车");
    },
    escFn() {
      console.log("用户按下了esc键");
    },
    btn() {
      // let arr = this.msg.split("");
      // arr.reverse();
      // this.msg = arr.join("");
      this.msg = this.msg.split("").reverse().join("");
    },
    Btn() {
      this.isShow = !this.isShow;
    },
  },
};
</script>


<style lang="less">
/* 
  如果需要在vue文件中书写less代码  做额外的处理
  1.style 标签上  lang="less"
  2.去装包 yarn add less less-loader -D 或者npm i less less-loader -D
*/
body {
  p {
    color: hotpink;
  }
  background-color: #ccc;
  #app {
    width: 800px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>